<template>
    <div class="component-login">
        <modal class='component-login__modal' 
            :show='show' 
            @close='emitClose'>
            <div class='component-login__header'>
                <p class='component-login__welcome'>欢迎使用“有借”</p>
                <p class='component-login__bind-text'>请先登录</p>
            </div>
            <div class="component-login__form">
                <div class="form__item">
                    <div class="form__value">
                        <input v-model='tel' type="tel" placeholder="手机号码">
                    </div>
                </div>
                <div class="form__item">
                    <div class="form__value">
                        <input v-model='password' type="password" placeholder="登录密码">
                        <p class="login__forget button short pure" @click.stop='goForgetPassword'>忘记密码</p>
                    </div>
                </div>
            </div>
            <div class="component-login__button" @click='checkMobile'><span class="button long">确定</span></div>
            <p class='component-login__register' @click='goLogin'>没有账号<span>注册</span></p>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from '../components/Modal.vue'
    import checkBox from '../components/CheckBox.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { loginValidation } from '../validation/validation'
    import { loginApi, contactApi, loanInApi, loanOutApi, userApi, payApi } from '../api/api'
    import moment from 'moment'

    export default {
        name:'User',
        components:{
            modal,
            checkBox
        },
        filters:{
            toYuan,
            dateFormat,
        },
        props: {
            show: {
                type: Boolean,
                required: true,
                default:false
            },
            action: {
                type: String,
                default:''
            },
        },
        data() {
            return {
                tel:'',
                password:'',
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),

            totalPrice(){
                let price = 0
                _.each(this.value,(value,index)=>{
                    if(value.check == true){
                        price = price + value.repayAmount
                    }
                })
                return price
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setNeedLogin',
                'setUserInfo',
                'setBizRole'
            ]),

            // function

            checkMobile(){
                let params = {
                    mobile:this.tel,
                    loginPassword:this.password,
                }
                if(!loginValidation(params)) return

                this.showLoading()
                loginApi.checkBizRole({
                    mobile:this.tel
                })
                .then(result=>{
                    if(result.bizRole){
                        this.setBizRole(result.bizRole)
                    }
                    this.login(params)
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            login(params){
                // if(!this.passed) return

                this.showLoading()
                loginApi.login(params)
                .then(result=>{
                    this.setSessionId(result.sessionId)
                    this.setNeedLogin(false)
                })
                .then(this.setUserInfo)
                .then(result=>{
                    if(result && !result.user.bizRole){
                        this.$router.push({
                            name:'id-select',
                            query:{
                                actions:'back'
                            }
                        })
                        return
                    }
                    this.$ga.event({
                      eventCategory: 'login',
                      eventAction: 'jump',
                      eventLabel: '登录'
                    })
                    this.hideLoading()
                    this.emitClose()
                    this.emitFinish()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goLogin(){
                this.$router.push({
                    name:'bind-phone',
                    query:{
                        action:this.action
                    }
                })
            },
            emitClose(){
                this.$emit('close')
            },
            emitFinish(){
                this.$emit('finish')
            },
            goForgetPassword(){
                this.$router.push({
                    name:'user-password-find-login',
                    query:{
                        mobile:this.tel
                    }
                })
            },
        },
        created(){

        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-login__modal{
        .component-login__header{
            padding-left: 0;
        }
        .component-login__welcome{
            @extend %font-caption;
        }
        .component-login__bind-text{
            @extend %font-title;
            color:$importColor;
        }
        .component-login__form{
            .form__item{  
                margin-top: 24px;
                &:last-child{
                    margin-top:32px;
                    &:after{
                        display: block;
                    }
                }
                &:after{
                    left:0;
                    right:0;
                }
            }
            .form__value{
                position: relative;
                input{
                    @extend %font-subhead;
                    padding:7px 0;
                    text-align: left;
                }
            }
            .login__forget{
                padding-right: 0;
                text-align: right;
            }
        }
        .component-login__button{
            padding-top: 38px;
        }
        .component-login__register{
            @extend %font-caption;
            padding-top: 14px;
            text-align: center;
            span{
                color:$orange;
            }
        }
    }

</style>
